<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修改歌单</title>
    <style>
        /* 简单的样式，用于美化表单 */
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }

        /*form {*/
        /*    max-width: 600px;*/
        /*    margin: auto;*/
        /*    padding: 20px;*/
        /*    border: 1px solid #ccc;*/
        /*    border-radius: 5px;*/
        /*    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
        /*}*/
        label {
            display: block;
            margin-bottom: 8px;
        }

        input, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<h1>修改歌单</h1>
<form action="update" method="post" onsubmit="return checkForm()"> <!-- 注意：这里的action需要替换为实际的服务器端处理URL -->

    <label for="title">歌单名称</label>
    <input type="text" id="title" name="title" value="${songList.title}" placeholder="请输入歌单名称">
    <input type="hidden" name="id" value="${songList.id}">

    <label for="info">歌单描述</label>
    <textarea id="info" name="info" placeholder="请输入详细描述" rows="4">${songList.info}</textarea>

    <label for="picture">封面图</label>
    <input type="text" id="picture" value="${songList.picture}" name="picture" placeholder="请输入封面图链接地址">

    <label for="num">歌曲数量</label>
    <input type="number" id="num" name="num" value="${songList.num}" placeholder="请输入歌单数量" min="1">

    <label for="create_time">发布时间</label>
    <input type="date" id="create_time" value="${songList.create_time}" name="create_time"> <!-- 注意：这里使用了HTML5的date输入类型，格式通常为YYYY-MM-DD -->

    <button type="submit">修改</button>
    <button type="button" onclick="history.back()">返回</button> <!-- 注意：这里的returnUrl需要替换为实际的返回URL -->
</form>
</body>
<script src="statics/js/jquery-3.7.1.min.js">

</script>


<script>
    function checkForm() {
        var title = $("#title").val()

        var create_time = $("#create_time").val()
        var dataFormater= /^(\d{4})-(0\d{1}|1[0-2])-(0\d{1}|[12]\d{1}|3[01])$/;
        if(title==null ||title.length==0){
            alert("歌单名称不能为空！");
            return false;
        }
        if(create_time==null ||create_time.length==0){
            alert("上传时间不能为空！");
            return false;
        }else  if(!dataFormater.test(create_time)){
            alert("上传时间格式不正确！");
            return false;
        }
        return true;
    }

</script>

</html>